<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="{% static 'jQuery-3.5.1.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="/static/jQuery-3.5.1.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    {#    <script src="/static/js/csrf.js"></script>#}

    <style>

    </style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="jumbotron">
                <h4>欢迎登录。</h4>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">

            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" name="username" class="form-control" id="username">
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" name="password" class="form-control" id="password">
                <span style="color: red"></span>
            </div>

            <div class="form-group">
                <label for="">验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="text" name="code" id="id_code">
                        <span style="color:red;"></span>
                    </div>
                    <div class="col-md-6">
                        <!--
                        如何实现点击以下验证码，就可以刷新获取新的验证码？
                        只要src的地址改变，就会重新刷新get请求，
                        给img标签设置一个点击事件，来实现
                        -->
                        <img src="/app01/get_code/" alt="" width="260" height="30" id="id_img">
                    </div>
                </div>

            </div>
            <p><input type="button" value="登录" class="btn btn-primary btn-sm btn-block" id="btn"></p>
            <p><a href="{% url 'app01_register' %}" class="btn btn-block btn-success btn-sm ">注册</a></p>
            <p><a href="/app01/find_password/" class="btn btn-block btn-info">找回密码</a></p>


        </div>
    </div>
</div>


<script>
    $("#id_img").click(function () {
        //先获取标签之前的src
        let oldVal = $(this).attr('src');
        //只要src的url改变了，就会重新提交get请求，实现获取验证码,url+？ ，？不会参与url的匹配
        $(this).attr('src', oldVal += '?')

    })

    function flash() {
        let val = $('#id_img').attr('src')
        $('#id_img').attr('src', val += '?')
        //刷新验证码的函数
    }

    //设置获取焦点事件，修改掉用户或密码错误提示信息
    $('#password').focus(function () {
        $(this).next().text('')
    })
    $('#username').focus(function () {
        $('#password').next().text('')
    })
    //设置获取焦点事件，修改掉验证码错误提示信息
    $('#id_code').focus(function () {
        $(this).next().text('')
    })

    $('#btn').on('click', function () {
        let username = $('#username').val()
        let password = $('#password').val()
        let code = $("#id_code").val()


        $.ajax({
            url: '',
            type: 'post',
            data: {
                'username': username,
                'password': password,
                'code': code,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function (array) {
                //验证码错误
                if (array.code === 3000) {
                    $('#id_code').next().text(array.msg)
                    flash()//刷新验证码
                }
                //用户名或密码错误
                else if (array.code === 2000) {
                    $('#password').next().text(array.msg)
                    flash()//刷新验证码
                }
                //用户登录成功，要跳转到指定的url上
                else if (array.code === 1000) {
                    alert(array.msg)
                    flash()//刷新验证码
                    //parent代表的是协议加ip加端口的部分，再拼接上array.url就是要跳转的最终url
                    parent.location.href = array.url
                }
            }
        })

    })


</script>

</body>
</html>